<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable prettier/prettier -->
<template>
  <div>
    <div class="card content-box" v-if="!show_task">
      <span class="text">批量任务分配</span>
      <el-divider></el-divider>
      <!--搜索-->
      <div style="width: 100%; display: flex; justify-content: start">
        <el-button type="primary" @click="one = true">批量添加任务</el-button>
        <el-button type="success" @click="downloadSchedule">下载已保存排班表</el-button>
      </div>
      <br />
      <!--展示机构列表-->
      <el-table :data="paginatedBatchList" border class="custom-table" style="width: 100%" :default-sort="{ prop: 'batchCreateTime', order: 'descending' }">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column label="批次名" prop="batchName"></el-table-column>
        <el-table-column label="创建时间" prop="batchCreateTime" sortable>
          <template #default="scope">
            {{ formatDateTime(scope.row.batchCreateTime) }}
          </template>
        </el-table-column>
        <el-table-column label="开始时间" prop="batchStartTime">
          <template #default="scope">
            {{ formatDate(scope.row.batchStartTime) }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="batchEndTime">
          <template #default="scope">
            {{ formatDate(scope.row.batchEndTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <!--#default="{ row }"-->
          <template #default="{ row }">
            <el-button type="primary" @click="showTask(row)" size="small">查看</el-button>
            <el-button type="warning" @click="showEditBatch(row)" size="small">编辑</el-button>
            <el-button type="danger" @click="deleteBatch(row)" size="small">删除</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无任务批次" />
        </template>
      </el-table>
      <br>
      <!--分页-->
      <div style="width: 100%; display: flex; justify-content: end">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :pager-count="7"
          layout="jumper, prev, pager, next, total"
          :total="totalItems"
          @current-change="handleCurrentChange"
        /></div>
    </div>
    <BatchDetail  v-else :batch-id="detailBatchId" :batch-name="detailBatchName" @turn-back="closeDetail"/>
    <!-- 添加任务弹窗 -->
    <!--三级窗口-->
    <el-dialog v-model="one" title="批量任务创建" width="70%">
      <!--编辑模式-->
      <el-form :model="taskForm" label-width="130px" style="padding-right: 30px" v-if="one">
        <el-form-item>
          <el-radio-group v-model="withTemplate">
            <el-radio-button label="使用现有模板" value="1" />
            <el-radio-button label="不使用现有模板" value="0" />
          </el-radio-group>
          <span style="display: flex; align-items: center; color: grey; margin-left: 15px"><el-icon style="margin-right: 5px"><Warning /></el-icon>不使用现有模板将会创建新的任务模板</span>
        </el-form-item>
        <el-form-item label="任务模板" v-if="withTemplate ==='1'">
          <el-select v-model="taskForm.inspectionId" placeholder="选择" @change="selectTaskModuleChange" :disabled="withTemplate === '0'">
            <el-option
              v-for="item in taskModels"
              :key="item.inspectionId"
              :label="item.inspectionName"
              :value="item.inspectionId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择路线" prop="inspectionMapId" v-else >
          <el-select v-model="templateForm.inspectionMapId" placeholder="选择" @change="selectTemplateMap(templateForm.inspectionMapId)">
            <el-option v-for="item in AllMap" :key="item.mapId" :label="item.mapName" :value="item.mapId" />
          </el-select>
        </el-form-item>
        <el-form-item label="批次名称">
          <el-input v-model="taskForm.batchName"></el-input>
        </el-form-item>
        <el-form-item label="任务名称">
          <el-input v-model="taskForm.inspectionWorkName"></el-input>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="batchTimeRange"
            value-format="YYYY-MM-DD"
            :suffix-icon="Calendar"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :disabled-date="disabledDate"
          />
          <span style="display: flex; align-items: center; color: grey; margin-left: 15px"><el-icon style="margin-right: 5px"><Warning /></el-icon>使用排班表分配任务时可不选</span>
        </el-form-item>
        <el-form-item label="开始时间(每天)">
          <el-input-number v-model="formattedHour" :controls="false" :min="0" :max="23" size="small" style="width: 10%"></el-input-number>&nbsp;时&nbsp;
          <el-input-number v-model="formattedMinute" :controls="false" :min="0" :max="59" size="small" style="width: 10%"></el-input-number>&nbsp;分
        </el-form-item>
        <el-form-item label="任务时限">
          <el-input-number v-model="taskForm.inspectionLimitTime" controls-position="right" :min="1"></el-input-number>
          <span>&nbsp;小时</span>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="one = false">取消</el-button>
          <el-button type="primary" @click="Next">手动分配点位负责人</el-button>
          <el-button type="primary" @click="NextWithSchedule">按排班表分配点位负责人</el-button>
        </span>
      </template>
    </el-dialog>
    <!--任务模板基本信息-->
    <el-dialog v-model="showTemplateDialog" title="批量任务创建" width="70%">
      <el-table :data="templateForm.inspectionDatas" style="width: 100%" border>
        <el-table-column prop="mapDetailName" label="路线点位名"></el-table-column>
        <el-table-column prop="unitName" label="机组"></el-table-column>
        <el-table-column prop="inspectionDataName" label="点位任务名">
          <template #default="scope">
            <el-input v-model="scope.row.inspectionDataName" placeholder="点位任务名"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="inspectionDataDesc" label="任务描述">
          <template #default="scope">
            <el-input v-model="scope.row.inspectionDataDesc" placeholder="点位任务描述"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="inspectionGroupId" label="数据组">
          <template #default="scope">
            <el-select v-model="scope.row.inspectionGroupId" placeholder="选择数据组">
              <el-option
                v-for="item in datas"
                :key="item.inspectionGroupId"
                :label="item.inspectionGroupName"
                :value="item.inspectionGroupId"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="执行班组">
          <template #default="scope">
            <el-select v-model="scope.row.inspectionDetailClass" placeholder="选择班组" @change="scope.row.inspectionDetailUser = null">
              <el-option
                v-for="clas in workerListByClass"
                :key="clas.classId"
                :label="clas.className"
                :value="clas.classId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="负责人">
          <template #default="scope">
            <el-select v-model="scope.row.inspectionDetailUser" placeholder="选择组员" :disabled="!scope.row.inspectionDetailClass">
              <el-option v-for="item in getWorkerList(scope.row.inspectionDetailClass)" :key="item.userId" :label="item.realName" :value="item.userId"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showTemplateDialog = false; one = true">上一步</el-button>
          <el-button type="primary" @click="Next2">
            下一步
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="two" title="批量任务创建" width="70%">
      <div>
        <el-table :data="taskPoint" class="custom-table" style="width: 100%" border>
          <el-table-column label="点位名" prop="mapDetailDesc"></el-table-column>
          <el-table-column label="任务名" prop="inspectionDataName"></el-table-column>
          <el-table-column label="任务描述" prop="inspectionDataDesc"></el-table-column>
          <el-table-column label="执行班组">
            <template #default="scope">
              <el-select v-model="scope.row.inspectionDetailClass" placeholder="选择班组" @change="scope.row.inspectionDetailUser = null">
                <el-option
                  v-for="clas in workerListByClass"
                  :key="clas.classId"
                  :label="clas.className"
                  :value="clas.classId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="负责人">
            <template #default="scope">
              <el-select v-model="scope.row.inspectionDetailUser" placeholder="选择组员" :disabled="!scope.row.inspectionDetailClass">
                <el-option v-for="item in getWorkerList(scope.row.inspectionDetailClass)" :key="item.userId" :label="item.realName" :value="item.userId"></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="
              two = false;
              one = true;
            "
          >上一步</el-button>
          <el-button
            type="primary"
            @click="Next2"
          >
            下一步
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showUseScheduleDialog" title="批量任务创建" width="70%">
      <div>
        <el-table :data="taskPoint" class="custom-table" style="width: 100%" border>
          <el-table-column label="路线点位名" prop="mapDetailDesc"></el-table-column>
          <el-table-column label="点位任务名" prop="inspectionDataName"></el-table-column>
          <el-table-column label="点位任务描述" prop="inspectionDataDesc"></el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span style="display: flex; align-items: center; color: grey; margin-right: 15px"><el-icon style="margin-right: 5px"><Warning /></el-icon>将会按已保存排班表确定巡检任务执行班组</span>
          <span class="dialog-footer">
            <el-button type="success" @click="downloadSchedule">下载已保存排班表</el-button>
          <el-button type="success" @click="uploadSchedule = true">更新排班表</el-button>
          <el-button
            @click="
              showUseScheduleDialog = false;
              one = true;
            "
          >上一步</el-button>
          <el-button
            type="primary"
            @click="Next2WithSchedule"
          >
            下一步
          </el-button>
          </span>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="showTemplateUseScheduleDialog" title="批量任务创建" width="70%">
      <el-table :data="templateForm.inspectionDatas" style="width: 100%" border>
        <el-table-column prop="mapDetailName" label="路线点位名"></el-table-column>
        <el-table-column prop="unitName" label="机组"></el-table-column>
        <el-table-column prop="inspectionDataName" label="点位任务名">
          <template #default="scope">
            <el-input v-model="scope.row.inspectionDataName" placeholder="点位任务名"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="inspectionDataDesc" label="任务描述">
          <template #default="scope">
            <el-input v-model="scope.row.inspectionDataDesc" placeholder="点位任务描述"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="inspectionGroupId" label="数据组">
          <template #default="scope">
            <el-select v-model="scope.row.inspectionGroupId" placeholder="选择数据组">
              <el-option
                v-for="item in datas"
                :key="item.inspectionGroupId"
                :label="item.inspectionGroupName"
                :value="item.inspectionGroupId"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span style="display: flex; align-items: center; color: grey; margin-right: 15px"><el-icon style="margin-right: 5px"><Warning /></el-icon>将会按已保存排班表确定巡检任务执行班组</span>
          <span class="dialog-footer">
            <el-button type="success" @click="downloadSchedule">下载已保存排班表</el-button>
            <el-button type="success" @click="uploadSchedule = true">更新排班表</el-button>
            <el-button @click="showTemplateUseScheduleDialog = false; one = true">上一步</el-button>
            <el-button type="primary" @click="Next2WithSchedule">
              下一步
            </el-button>
          </span>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="uploadSchedule" title="上传排班表" width="40%">
      <el-upload
        class="upload-demo"
        drag
        action="/api-self/inspection/distribute/schedule"
        multiple
        accept=".xls, .xlsx"
        name="scheduleExcel"
        :on-success="uploadSuccess"
        :on-error="uploadError"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖动文件到这儿或 <em>点击以上传文件</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            请上传xls或xlsx格式的文件
          </div>
        </template>
      </el-upload>
    </el-dialog>

    <el-dialog v-model="showDetailMemberVODialog" title="各班组点位负责人设置" width="70%">
      <el-table :data="classMemberVO" style="width: 100%" border>
        <el-table-column label="班组" prop="className"></el-table-column>
        <el-table-column v-for="point in taskPoint" :label="point.mapDetailDesc" :key="point.mapDetailId">
          <template #default="{row}">
            <el-select v-model="row.memberDetailVO.find(x => x.inspectionDataId === point.inspectionDataId).inspectionDetailUser" placeholder="选择组员">
              <el-option v-for="item in getWorkerList(row.classId)" :key="item.userId" :label="item.realName" :value="item.userId"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDetailMemberVODialog = false; showUseScheduleDialog = true">上一步</el-button>
          <el-button type="primary" @click="Next3">下一步</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showDetailMemberVODialogWithoutTemplate" title="各班组点位负责人设置" width="70%">
      <el-table :data="classMemberVO" style="width: 100%" border>
        <el-table-column label="班组" prop="className"></el-table-column>
        <el-table-column v-for="point in templateForm.inspectionDatas" :label="point.mapDetailName" :key="point.mapDetailId">
          <template #default="{row}">
            <el-select v-model="row.memberDetailVO.find(x => x.mapDetailId === point.mapDetailId).inspectionDetailUser" placeholder="选择组员">
              <el-option v-for="item in getWorkerList(row.classId)" :key="item.userId" :label="item.realName" :value="item.userId"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDetailMemberVODialogWithoutTemplate = false; showTemplateUseScheduleDialog = true">上一步</el-button>
          <el-button type="primary" @click="Next3">下一步</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="add_task_commit"  title="批量任务创建" width="70%">
      <!--最终展示模式-->
      <el-descriptions title="批次详情" direction="vertical" :column="5" border>
        <el-descriptions-item label="批次名称">{{ taskForm.batchName }}</el-descriptions-item>
        <el-descriptions-item v-if="withTemplate === '1'" label="巡检线路">{{ getMapInfo(inspection.inspectionMapId) }}</el-descriptions-item>
        <el-descriptions-item v-else label="巡检线路">{{ getMapInfo(templateForm.inspectionMapId) }}</el-descriptions-item>
        <el-descriptions-item label="批次时间段">{{ batchTimeRange[0] }} 至 {{ batchTimeRange[1] }}</el-descriptions-item>
        <el-descriptions-item label="巡检开始时间(每天)">{{ formattedHour }}:{{ formattedMinute}}</el-descriptions-item>
        <el-descriptions-item label="巡检时限">{{ taskForm.inspectionLimitTime }}小时</el-descriptions-item>
      </el-descriptions>
      <br>
      <el-descriptions title="点位任务详情" direction="vertical" :column="1" border> </el-descriptions>
      <el-table :data="inspectionDetails" class="custom-table" style="width: 100%" v-if="withTemplate === '1'">
        <el-table-column label="序号" type="index" width="100"></el-table-column>
        <el-table-column label="任务名">
          <template #default="scope">
            <text>{{scope.row.inspectionData.inspectionDataName}}</text>
          </template>
        </el-table-column>
        <el-table-column label="点位名">
          <template #default="scope">
            <text>{{scope.row.mapDetailVO.mapDetailDesc}}</text>
          </template>
        </el-table-column>
        <el-table-column label="机组">
          <template #default="scope">
            <text>{{scope.row.mapDetailVO.unitName}}</text>
          </template>
        </el-table-column>
        <el-table-column label="数据组">
          <template #default="scope">
            <text>{{ getDataInfo(scope.row.inspectionData.inspectionGroupId) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="班组">
          <template #default="scope">
            <text>{{ getClassInfo(taskPoint.find(point => point.inspectionDataId ===
              scope.row.inspectionData.inspectionDataId).inspectionDetailClass) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="负责人">
          <template #default="scope">
            <text>{{ getUserInfo(taskPoint.find(point => point.inspectionDataId ===
              scope.row.inspectionData.inspectionDataId).inspectionDetailUser) }}</text>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="templateForm.inspectionDatas" class="custom-table" style="width: 100%" v-else>
        <el-table-column label="序号" type="index" width="100"></el-table-column>
        <el-table-column label="路线点位名">
          <template #default="scope">
            <text>{{scope.row.mapDetailName}}</text>
          </template>
        </el-table-column>
        <el-table-column label="点位任务名" prop="inspectionDataName"></el-table-column>
        <el-table-column label="机组">
          <template #default="scope">
            <text>{{scope.row.unitName}}</text>
          </template>
        </el-table-column>
        <el-table-column label="数据组">
          <template #default="scope">
            <text>{{ getDataInfo(scope.row.inspectionGroupId) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="班组">
          <template #default="scope">
            <text>{{ getClassInfo(scope.row.inspectionDetailClass) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="负责人">
          <template #default="scope">
            <text>{{ getUserInfo(scope.row.inspectionDetailUser) }}</text>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="lastStep2">上一步</el-button>
          <el-button type="primary" @click="addTask(false)" :loading="addTaskLoadingFlag"> 创建 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="add_task_commit_schedule"  title="批量任务创建" width="70%">
      <!--最终展示模式-->
      <el-descriptions title="批次详情" direction="vertical" :column="5" border>
        <el-descriptions-item label="批次名称">{{ taskForm.batchName }}</el-descriptions-item>
        <el-descriptions-item v-if="withTemplate === '1'" label="巡检线路">{{ getMapInfo(inspection.inspectionMapId) }}</el-descriptions-item>
        <el-descriptions-item v-else label="巡检线路">{{ getMapInfo(templateForm.inspectionMapId) }}</el-descriptions-item>
        <el-descriptions-item label="批次时间段">{{ batchTimeRange[0] }} 至 {{ batchTimeRange[1] }}</el-descriptions-item>
        <el-descriptions-item label="巡检开始时间(每天)">{{ formattedHour }}:{{ formattedMinute}}</el-descriptions-item>
        <el-descriptions-item label="巡检时限">{{ taskForm.inspectionLimitTime }}小时</el-descriptions-item>
      </el-descriptions>
      <br>
      <el-descriptions title="点位任务详情" direction="vertical" :column="1" border> </el-descriptions>
      <el-table :data="inspectionDetails" class="custom-table" style="width: 100%" v-if="withTemplate === '1'">
        <el-table-column label="序号" type="index" width="100"></el-table-column>
        <el-table-column label="任务名">
          <template #default="scope">
            <text>{{scope.row.inspectionData.inspectionDataName}}</text>
          </template>
        </el-table-column>
        <el-table-column label="点位名">
          <template #default="scope">
            <text>{{scope.row.mapDetailVO.mapDetailDesc}}</text>
          </template>
        </el-table-column>
        <el-table-column label="机组">
          <template #default="scope">
            <text>{{scope.row.mapDetailVO.unitName}}</text>
          </template>
        </el-table-column>
        <el-table-column label="数据组">
          <template #default="scope">
            <text>{{ getDataInfo(scope.row.inspectionData.inspectionGroupId) }}</text>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="templateForm.inspectionDatas" class="custom-table" style="width: 100%" v-else>
        <el-table-column label="序号" type="index" width="100"></el-table-column>
        <el-table-column label="路线点位名">
          <template #default="scope">
            <text>{{scope.row.mapDetailName}}</text>
          </template>
        </el-table-column>
        <el-table-column label="点位任务名" prop="inspectionDataName"></el-table-column>
        <el-table-column label="机组">
          <template #default="scope">
            <text>{{scope.row.unitName}}</text>
          </template>
        </el-table-column>
        <el-table-column label="数据组">
          <template #default="scope">
            <text>{{ getDataInfo(scope.row.inspectionGroupId) }}</text>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="lastStep3">上一步</el-button>
          <el-button type="primary" @click="addTask(true)" :loading="addTaskLoadingFlag"> 创建 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--修改任务抽屉-->
    <el-drawer v-model="edit_batch" title="编辑批次信息" size="35%">
      <div>
        <!--任务信息-->
        <el-card style="max-width: 100%">
          <template #header>
            <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
              <span>{{ editBatchForm.OldBatchName }}</span>
              <el-button link @click="confirmEdit" type="danger" size="large">修改</el-button>
            </div>
          </template>
          <el-form v-model="editBatchForm" label-position="right" style="margin-left: 10%">
            <el-form-item label="任务名称">
              <el-input v-model="editBatchForm.newBatchName" style="width: 60%"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
        <br />
        <br />
        <el-card>
          <template #header>
            <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
              <span>任务点位详情</span>
              <el-button link @click="showEditBatchDetail" type="primary" size="large">编辑</el-button>
            </div>
          </template>
          <el-table :data="editBatchDetails" class="custom-table" style="width: 100%" border>
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column label="点位名称" prop="mapDetailDesc"></el-table-column>
            <el-table-column label="点位任务名" prop="inspectionDataName"></el-table-column>
            <el-table-column label="任务描述" prop="inspectionDataDesc"></el-table-column>
          </el-table>
          <br />
        </el-card>
      </div>
    </el-drawer>

    <el-dialog v-model="edit_details_dialog" title="点位信息编辑" width="70%">
      <div>
        <el-table :data="editBatchDetails2" style="width: 100%" border>
          <el-table-column prop="mapDetailDesc" label="点位名"></el-table-column>
          <el-table-column prop="inspectionDataName" label="点位任务名称">
            <template #default="scope">
              <el-input v-model="scope.row.inspectionDataName" placeholder="点位任务名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionDataDesc" label="任务描述">
            <template #default="scope">
              <el-input v-model="scope.row.inspectionDataDesc" placeholder="点位任务描述"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionGroupId" label="数据组">
            <template #default="scope">
              <el-select v-model="scope.row.inspectionGroupId" placeholder="选择数据组">
                <el-option
                  v-for="item in datas"
                  :key="item.inspectionGroupId"
                  :label="item.inspectionGroupName"
                  :value="item.inspectionGroupId"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: end;align-items: center">
          <span style="display: flex; align-items: center; color: grey; margin-right: 15px"><el-icon style="margin-right: 5px"><Warning /></el-icon>修改只会作用到批次中未开始的巡检任务</span>
          <el-button type="danger" @click="ConfirmEditDetail"> 确认修改 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="js">
import { onMounted, ref, reactive, computed } from "vue";
import request from "@/api/request.js";
import { ElMessage, ElMessageBox } from "element-plus";
import BatchDetail from "./batchDetail/index.vue";
import { Calendar, UploadFilled, Warning } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/modules/user.ts";
import { getDataService } from "@/api/inspection/datas.js";
import http from "@/utils/http.js";

const currentUserId = useUserStore().userInfo.userId;
const withTemplate = ref("1");
const now = new Date();
const hour = ref();
const minute = ref();
hour.value = now.getHours();
minute.value = now.getMinutes();

const formattedMinute = computed({
  get() {
    // 使用 padStart 保证显示两位数字
    return minute.value.toString().padStart(2, "0");
  },
  set(value) {
    // 将输入转换为整数并更新 minute
    minute.value = parseInt(value, 10);
  }
});

const formattedHour = computed({
  get() {
    // 使用 padStart 保证显示两位数字
    return hour.value.toString().padStart(2, "0");
  },
  set(value) {
    // 将输入转换为整数并更新 minute
    hour.value = parseInt(value, 10);
  }
});

const disabledDate = time => {
  // 禁用今天之前的日期
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return time.getTime() < today.getTime();
};

const batchTimeRange = ref("");

const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const batchList = ref([]);
const paginatedBatchList = ref([]);

const showTemplateDialog = ref(false);
//三级
const one = ref(false);
const two = ref(false);
const add_task_commit = ref(false);
const addTaskLoadingFlag = ref(false);

const uploadSchedule = ref(false);
const showUseScheduleDialog = ref(false);
const showTemplateUseScheduleDialog = ref(false);
const show_task = ref(false);
const showDetailMemberVODialog = ref(false);
const showDetailMemberVODialogWithoutTemplate = ref(false);
const add_task_commit_schedule = ref(false);
const edit_batch = ref(false);
const edit_details_dialog = ref(false);

const detailBatchId = ref(null);
const detailBatchName = ref("");

const AllClass = ref([]);
const workerListByClass = ref([]);
const datas = ref([]);
const AllMap = ref([]);

const classMemberVO = ref([]);

//批次信息修改表单
const editBatchForm = ref({
  batchId: 0,
  newBatchName: "",
  OldBatchName: ""
});
const editBatchDetails = ref([]);
const editBatchDetails2 = ref([]);
//任务模板
const taskModels = ref([]);
//当前任务模板
const inspection = ref({
  inspectionDate: "", //巡检任务模版创建时间
  inspectionId: 0, //巡检任务模版ID
  inspectionClassId: 0, //巡检模版任务所属班组
  inspectionMapId: 0, //巡检模版任务的地图ID
  inspectionName: "", //巡检模版任务名字
  inspectionUserId: 0 //巡检模版任务创建者ID
});

//任务模板点位信息
const inspectionDetails = ref([]);

const taskPoint = ref([]);

//分配任务提交表单
const taskForm = ref({
  inspectionLimitTime: null,
  inspectionStartTime: "",
  inspectionWorkName: "",
  inspectionId: null,
  inspectionWorkNumber: 0,
  inspectionWorkStatus: 0,
  inspectionDetails: []
});
const initialTaskForm = ref({ ...taskForm.value }); // 浅拷贝初始状态
//任务模板添加表单
const templateForm = ref({
  inspectionUserId: currentUserId,
  inspectionClassId: null,
  inspectionName: "",
  inspectionMapId: "",
  inspectionDatas: []
});

onMounted(async () => {
  await fetchBatchList();
  updatePage();
  console.log("当前userid：" + currentUserId);
  getAllMap();
  getAllClass();
  getAllTaskModule();
  await getDatas();
  await getWorkerByClass();
});
//编辑批次信息窗口
const showEditBatch = async row => {
  editBatchForm.value.batchId = row.batchId;
  editBatchForm.value.OldBatchName = row.batchName;
  editBatchForm.value.newBatchName = row.batchName;
  await pushDetailPointToEditDetails();
  edit_batch.value = true;
};
const pushDetailPointToEditDetails = async () => {
  editBatchDetails.value = [];
  await request.get("/api-self/inspection/batchDetail/" + editBatchForm.value.batchId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      data.data.forEach(detail => {
        const newDetail = {};
        newDetail["inspectionDataDesc"] = detail.inspectionDataDesc;
        newDetail["inspectionDataId"] = detail.inspectionDataId;
        newDetail["inspectionDataName"] = detail.inspectionDataName;
        newDetail["inspectionGroupId"] = detail.inspectionGroupId;
        newDetail["inspectionId"] = detail.inspectionId;
        newDetail["mapDetailId"] = detail.mapDetailId;
        newDetail["mapDetailDesc"] = detail.mapDetailDesc;
        editBatchDetails.value.push(newDetail);
      });
    } else {
      ElMessage.error("获取批次任务详情详情失败：" + data.message);
    }
  });
};
const showEditBatchDetail = () => {
  edit_details_dialog.value = true;
  editBatchDetails2.value = JSON.parse(JSON.stringify(editBatchDetails.value));
};
const ConfirmEditDetail = () => {
  request.put("/api-self/inspection/batchDetail/" + editBatchForm.value.batchId, editBatchDetails2.value).then(res => {
    const data = res.data;
    if (data.code === 0) {
      ElMessage.success("修改成功");
      pushDetailPointToEditDetails();
      edit_details_dialog.value = false;
    } else {
      ElMessage.error("修改失败：" + data.message);
    }
  });
};
const confirmEdit = () => {
  ElMessageBox.confirm("确认修改吗?", "警告", {
    confirmButtonText: "修改",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    request.put("/api-self/inspection/batch", editBatchForm.value).then(async res => {
      const data = res.data;
      if (data.code === 0) {
        await fetchBatchList();
        updatePage();
        ElMessage.success("修改成功");
      } else {
        ElMessage.error("修改失败：" + data.message);
      }
    });
  });
};
//删除批次
const deleteBatch = row => {
  ElMessageBox.confirm("批次包含的巡检任务将一并删除，确认删除该批次?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    request.delete("/api-self/inspection/batch/" + row.batchId).then(async res => {
      const data = res.data;
      if (data.code === 0) {
        await fetchBatchList();
        updatePage();
        ElMessage.success("删除成功");
      } else {
        ElMessage.error("删除失败：" + data.message);
      }
    });
  });
};
const mapClassMemberVO = () => {
  classMemberVO.value = [];
  if (workerListByClass.value) {
    workerListByClass.value.forEach(data => {
      const clas = {};
      clas["classId"] = data.classId;
      clas["className"] = data.className;
      clas["memberDetailVO"] = [];
      taskPoint.value.forEach(point => {
        const p = {};
        p["inspectionDataId"] = point.inspectionDataId;
        p["inspectionDetailUser"] = null;
        clas["memberDetailVO"].push(p);
      });
      classMemberVO.value.push(clas);
    });
  }
  console.log(classMemberVO.value);
};
const mapClassMemberVOWithoutTemplate = () => {
  classMemberVO.value = [];
  if (workerListByClass.value) {
    workerListByClass.value.forEach(data => {
      const clas = {};
      clas["classId"] = data.classId;
      clas["className"] = data.className;
      clas["memberDetailVO"] = [];
      templateForm.value.inspectionDatas.forEach(point => {
        const p = {};
        p["mapDetailId"] = point.mapDetailId;
        p["inspectionDataId"] = null;
        p["inspectionDetailUser"] = null;
        clas["memberDetailVO"].push(p);
      });
      classMemberVO.value.push(clas);
    });
  }
  console.log(classMemberVO.value);
};
const downloadSchedule = () => {
  http
    .get("/inspection/distribute/schedule", { responseType: "blob" })
    .then(res => {
      // 创建一个 Blob 对象，表示文件的二进制数据
      const blob = new Blob([res.data], { type: res.headers["content-type"] });

      // 创建一个下载链接
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "schedule.xlsx"; // 设置下载文件名

      // 触发下载
      document.body.appendChild(a);
      a.click();

      // 清理
      a.remove();
      window.URL.revokeObjectURL(url);
    })
    .catch(error => {
      if (error.response.status === 404) ElMessage.error("无现有排班表，请点击更新排班表以上传");
      console.error("下载文件失败:", error);
    });
};
const uploadSuccess = () => {
  ElMessage.success("上传成功");
};
const uploadError = error => {
  let errorStatus = "未知错误";
  try {
    const parsedError = JSON.parse(error.message);
    errorStatus = parsedError.status;
  } catch (e) {
    console.error("JSON 解析失败:", e);
  }
  ElMessage.error("上传失败,状态码：" + errorStatus);
};
const getWorkerByClass = async () => {
  await request.get("/api-self/users/account/selectByClass").then(res => {
    const data = res.data;
    if (data.code === 0) {
      workerListByClass.value = data.data;
    }
  });
};
const getWorkerList = classId => {
  const clas = workerListByClass.value.find(x => x.classId === classId);
  let workerList;
  if (clas) {
    workerList = clas.workerList;
  } else {
    workerList = [];
  }
  return workerList;
};

//将模板详细点位相关数据赋值给新建表单
const initTaskPoints = () => {
  inspectionDetails.value.forEach(detail => {
    let point = {
      inspectionDetailClass: null,
      inspectionDetailStatus: null,
      inspectionDetailUser: null,
      inspectionDataId: null,
      inspectionDetailNote: null
    };
    point.inspectionDataId = detail.inspectionData.inspectionDataId;
    point.inspectionDataName = detail.inspectionData.inspectionDataName;
    point.mapDetailDesc = detail.mapDetailVO.mapDetailDesc;
    point.inspectionDataDesc = detail.inspectionData.inspectionDataDesc;
    point.inspectionDetailStatus = 6; //默认未开始
    taskPoint.value.push(point);
  });
};
const resetTaskForm = () => {
  taskForm.value = { ...initialTaskForm.value }; // 重置为初始状态
};
const Next = () => {
  if (withTemplate.value === "1") {
    const inspectionId = taskForm.value.inspectionId;
    const inspectionLimitTime = taskForm.value.inspectionLimitTime;
    const batchName = taskForm.value.batchName;
    const inspectionWorkName = taskForm.value.inspectionWorkName;
    taskForm.value.inspectionStartTime = "2000-01-01 " + formattedHour.value + ":" + formattedMinute.value + ":00";
    taskPoint.value = [];
    initTaskPoints();
    if (inspectionId && batchName && inspectionLimitTime && batchTimeRange.value && inspectionWorkName) {
      one.value = false;
      two.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  } else {
    const mapId = templateForm.value.inspectionMapId;
    const batchName = taskForm.value.batchName;
    const inspectionLimitTime = taskForm.value.inspectionLimitTime;
    const inspectionWorkName = taskForm.value.inspectionWorkName;
    taskForm.value.inspectionStartTime = "2000-01-01 " + formattedHour.value + ":" + formattedMinute.value + ":00";
    if (mapId && batchName && batchTimeRange.value && inspectionLimitTime && inspectionWorkName) {
      one.value = false;
      showTemplateDialog.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  }
};
const NextWithSchedule = () => {
  if (withTemplate.value === "1") {
    const inspectionId = taskForm.value.inspectionId;
    const inspectionLimitTime = taskForm.value.inspectionLimitTime;
    const batchName = taskForm.value.batchName;
    const inspectionWorkName = taskForm.value.inspectionWorkName;
    taskForm.value.inspectionStartTime = "2000-01-01 " + formattedHour.value + ":" + formattedMinute.value + ":00";
    taskPoint.value = [];
    initTaskPoints();
    if (inspectionId && batchName && inspectionLimitTime && inspectionWorkName) {
      one.value = false;
      showUseScheduleDialog.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  } else {
    const mapId = templateForm.value.inspectionMapId;
    const batchName = taskForm.value.batchName;
    const inspectionWorkName = taskForm.value.inspectionWorkName;
    const inspectionLimitTime = taskForm.value.inspectionLimitTime;
    if (mapId && batchName && inspectionLimitTime && inspectionWorkName) {
      one.value = false;
      showTemplateUseScheduleDialog.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  }
};
const Next2 = () => {
  if (withTemplate.value === "1") {
    let flag = true;
    taskPoint.value.forEach(point => {
      if (!(point.inspectionDetailClass && point.inspectionDetailUser)) flag = false;
    });
    if (flag) {
      two.value = false;
      add_task_commit.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  } else {
    let flag = true;
    templateForm.value.inspectionDatas.forEach(data => {
      if (
        !(
          data.inspectionDataName &&
          data.inspectionDataDesc &&
          data.inspectionGroupId &&
          data.inspectionDetailClass &&
          data.inspectionDetailUser
        )
      )
        flag = false;
    });
    if (flag) {
      showTemplateDialog.value = false;
      add_task_commit.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  }
};
const Next2WithSchedule = () => {
  if (withTemplate.value === "1") {
    mapClassMemberVO();
    showUseScheduleDialog.value = false;
    showDetailMemberVODialog.value = true;
  } else {
    let flag = true;
    templateForm.value.inspectionDatas.forEach(data => {
      if (!(data.inspectionDataName && data.inspectionDataDesc && data.inspectionGroupId)) flag = false;
    });
    if (flag) {
      mapClassMemberVOWithoutTemplate();
      showTemplateUseScheduleDialog.value = false;
      showDetailMemberVODialogWithoutTemplate.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  }
};
const Next3 = () => {
  let flag = true;
  classMemberVO.value.forEach(vo => {
    vo.memberDetailVO.forEach(mvo => {
      if (!mvo.inspectionDetailUser) flag = false;
    });
  });
  if (!flag) {
    ElMessage.warning("请填写完整信息");
    return;
  }

  if (withTemplate.value === "1") {
    showDetailMemberVODialog.value = false;
    add_task_commit_schedule.value = true;
  } else {
    showDetailMemberVODialogWithoutTemplate.value = false;
    add_task_commit_schedule.value = true;
  }
};
const lastStep3 = () => {
  if (withTemplate.value === "1") {
    showDetailMemberVODialog.value = true;
    add_task_commit_schedule.value = false;
  } else {
    showDetailMemberVODialogWithoutTemplate.value = true;
    add_task_commit_schedule.value = false;
  }
};
const lastStep2 = () => {
  if (withTemplate.value === "1") {
    two.value = true;
    add_task_commit.value = false;
  } else {
    showTemplateDialog.value = true;
    add_task_commit.value = false;
  }
};
const addTask = async schedule => {
  addTaskLoadingFlag.value = true;
  if (withTemplate.value === "1") {
    if (schedule) addTaskWithSchedule();
    else addTaskWithTemplate();
  } else {
    try {
      await addTemplate();
      await fetchTemplateData(inspection.value.inspectionId);
      mapInspectionDataId();
      if (schedule) addTaskWithSchedule();
      else addTaskWithTemplate();
    } catch (e) {
      console.warn(error.message);
      return;
    }
  }
};
const addTaskWithTemplate = () => {
  if (withTemplate.value === "1") {
    taskForm.value.inspectionDetails = taskPoint.value;
    taskForm.value.inspectionWorkNumber = taskPoint.value.length;
  } else {
    taskForm.value.inspectionDetails = templateForm.value.inspectionDatas;
    taskForm.value.inspectionWorkNumber = templateForm.value.inspectionDatas.length;
    taskForm.value.inspectionId = inspection.value.inspectionId;
  }
  taskForm.value.inspectionWorkStatus = 4; //默认未开始状态
  taskForm.value.isBatch = 1;
  taskForm.value.batchStartTime = batchTimeRange.value[0] + " 00:00:00";
  taskForm.value.batchEndTime = batchTimeRange.value[1] + " 00:00:00";
  console.log(taskForm.value);
  request
    .post("/api-self/inspection/distribute", taskForm.value)
    .then(async res => {
      const data = res.data;
      if (data.code === 0) {
        ElMessage.success("任务批量分配成功");
        add_task_commit.value = false;
        await fetchBatchList();
        updatePage();
        resetTaskForm();
      } else {
        ElMessage.error("任务批量分配失败：" + data.message);
      }
      addTaskLoadingFlag.value = false;
    })
    .catch(() => {
      ElMessage.error("服务异常");
      addTaskLoadingFlag.value = false;
    });
};
const addTaskWithSchedule = () => {
  if (withTemplate.value === "1") {
    taskForm.value.inspectionDetails = taskPoint.value;
    taskForm.value.inspectionWorkNumber = taskPoint.value.length;
    taskForm.value.classMemberVO = classMemberVO.value;
  } else {
    taskForm.value.inspectionDetails = templateForm.value.inspectionDatas;
    taskForm.value.classMemberVO = classMemberVO.value;
    taskForm.value.classMemberVO.forEach(classMember => {
      classMember.memberDetailVO.forEach(memberDetail => {
        const detail = taskForm.value.inspectionDetails.find(detail => detail.mapDetailId === memberDetail.mapDetailId);
        memberDetail.inspectionDataId = detail ? detail.inspectionDataId : null; // 或设置为默认值
      });
    });
    taskForm.value.inspectionWorkNumber = templateForm.value.inspectionDatas.length;
    taskForm.value.inspectionId = inspection.value.inspectionId;
  }
  taskForm.value.inspectionWorkStatus = 4; //默认未开始状态
  taskForm.value.isBatch = 1;
  taskForm.value.batchStartTime = batchTimeRange.value[0] + " 00:00:00";
  taskForm.value.batchEndTime = batchTimeRange.value[1] + " 00:00:00";
  console.log(taskForm.value);
  request
    .post("/api-self/inspection/distribute/batch", taskForm.value)
    .then(async res => {
      const data = res.data;
      if (data.code === 0) {
        ElMessage.success("任务批量分配成功");
        add_task_commit_schedule.value = false;
        await fetchBatchList();
        updatePage();
        resetTaskForm();
      } else {
        ElMessage.error("任务批量分配失败：" + data.message);
      }
      addTaskLoadingFlag.value = false;
    })
    .catch(() => {
      ElMessage.error("服务异常");
      addTaskLoadingFlag.value = false;
    });
};
//在不使用模板分配任务时，首先先新建模板
const addTemplate = async () => {
  templateForm.value.inspectionName = taskForm.value.batchName + "模板";
  await request
    .post("/api-self/inspection/template", templateForm.value)
    .then(res => {
      const data = res.data;
      if (data.code === 0) {
        inspection.value = data.data;
      } else {
        ElMessage.error("创建任务模板失败：" + data.message);
        addTaskLoadingFlag.value = false;
        throw new Error("addTemplate failed");
      }
    })
    .catch(() => {
      ElMessage.error("服务异常");
      addTaskLoadingFlag.value = false;
      throw new Error("service error");
    });
};
//将获取的刚才新建的模板的点位信息映射到新建任务表单中
const mapInspectionDataId = () => {
  templateForm.value.inspectionDatas.forEach(data => {
    data.inspectionDataId = inspectionDetails.value.find(
      detail => detail.mapDetailVO.mapDetailId === data.mapDetailId
    ).inspectionData.inspectionDataId;
  });
};
//获取指定模板详细信息
const getTaskModuleData = async inspectionId => {
  inspection.value = taskModels.value.find(module => module.inspectionId === inspectionId);
  await request.get("/api-self/inspection/template/detail/" + inspectionId + "/" + inspection.value.inspectionMapId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      inspectionDetails.value = data.data;
    } else {
      ElMessage.error("获取模板任务点位信息失败：" + data.message);
    }
  });
};
//获取新建模板详细信息
const fetchTemplateData = async inspectionId => {
  await request
    .get("/api-self/inspection/template/detail/" + inspectionId + "/" + inspection.value.inspectionMapId)
    .then(res => {
      const data = res.data;
      if (data.code === 0) {
        inspectionDetails.value = data.data;
      } else {
        ElMessage.error("获取模板任务点位信息失败：" + data.message);
        throw new Error("get template detailData failed");
      }
    })
    .catch(() => {
      ElMessage.error("服务异常");
      throw new Error("service error");
    });
};
//分配任务时选择模板响应函数
const selectTaskModuleChange = () => {
  getTaskModuleData(taskForm.value.inspectionId);
  // getClassData(inspection.value.inspectionClassId);
};
//新建模板时选择路线响应函数
const selectTemplateMap = async mapId => {
  templateForm.value.inspectionDatas = [];
  await request.get("/api-self/inspection/map/" + mapId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      data.data.forEach(marker => {
        templateForm.value.inspectionDatas.push({
          mapDetailName: marker.mapDetailDesc,
          mapDetailId: marker.mapDetailId,
          inspectionDataName: "",
          inspectionDataDesc: "",
          inspectionGroupId: null,
          unitName: marker.unitName,
          inspectionDetailClass: null,
          inspectionDetailUser: null
        });
      });
    }
  });
};
//获取所有路线
const getAllMap = () => {
  request.get("/api-self/inspection/map/nopage").then(res => {
    const data = res.data;
    if (data.code === 0) {
      AllMap.value = data.data;
      AllMap.value = AllMap.value.filter(item => item.mapId !== -1 && item.mapId !== 1);
    } else {
      ElMessage.error("获取路线失败：" + data.message);
    }
  });
};
//获取所有任务模板
const getAllTaskModule = () => {
  request.get("/api-self/inspection/template").then(res => {
    const data = res.data;
    if (data.code === 0) {
      taskModels.value = data.data;
    } else {
      ElMessage.error("获取任务模板失败");
    }
  });
};
//获取所有数据组
const getDatas = async () => {
  let result = await getDataService();
  datas.value = result.data.data;
};
//获取所有班组
const getAllClass = () => {
  request.get("/api-self/users/class/getClasses").then(res => {
    const data = res.data;
    if (data.code === 0) {
      AllClass.value = data.data;
    } else {
      ElMessage.error("获取所有班组信息失败");
    }
  });
};
//查看批次中的任务
const showTask = row => {
  detailBatchId.value = row.batchId;
  detailBatchName.value = row.batchName;
  show_task.value = true;
};
const closeDetail = () => {
  show_task.value = false;
};
const fetchBatchList = async () => {
  await request.get("/api-self/inspection/batches").then(res => {
    const data = res.data;
    if (data.code === 0) {
      batchList.value = data.data;
      totalItems.value = batchList.value.length;
    } else {
      ElMessage.error("获取任务批次失败：" + data.message);
    }
  });
};
//分页函数
const updatePage = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  paginatedBatchList.value = batchList.value.slice(start, end);
};
const handleCurrentChange = newPage => {
  currentPage.value = newPage;
  updatePage(); // 更新当前页的数据
};
//格式化
const formatDateTime = date => {
  const d = new Date(date);

  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  const hours = String(d.getHours()).padStart(2, "0");
  const minutes = String(d.getMinutes()).padStart(2, "0");
  const seconds = String(d.getSeconds()).padStart(2, "0");
  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
};
const formatDate = date => {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${year}年${month}月${day}日`;
};
//查找指定路线名称
// 创建一个响应式对象来存储路线信息
const mapCache = reactive({});
const getMapInfo = mapId => {
  // 检查缓存，避免重复请求
  if (!mapCache[mapId]) {
    // 初始设为 '加载中...'，以处理异步过程
    mapCache[mapId] = "加载中...";
    mapCache[mapId] = AllMap.value.find(map => map.mapId === mapId).mapName;
  }
  return mapCache[mapId];
};
//查找指定用户名字
// 创建一个响应式对象来存储用户信息
const userCache = reactive({});
const getUserInfo = userId => {
  // 检查缓存，避免重复请求
  if (!userCache[userId]) {
    // 初始设为 '加载中...'，以处理异步过程
    userCache[userId] = "加载中...";

    http
      .get("/users/account/getUserInfo", { params: { userId: userId } })
      .then(res => {
        const data = res.data;
        if (data.code === 0) {
          userCache[userId] = data.data.realName;
        } else {
          userCache[userId] = "未知用户";
        }
      })
      .catch(() => {
        userCache[userId] = "请求失败";
      });
  }
  // 立即返回缓存值，初次时可能是 "加载中..."
  return userCache[userId];
};
//查找指定班组名字
// 创建一个响应式对象来存储用户信息
const classCache = reactive({});
const getClassInfo = classId => {
  // 检查缓存，避免重复请求
  if (!classCache[classId]) {
    // 初始设为 '加载中...'，以处理异步过程
    classCache[classId] = "加载中...";
    http
      .get("/users/class/getClass/" + classId)
      .then(res => {
        const data = res.data;
        if (data.code === 0) {
          classCache[classId] = data.data.className;
        } else {
          classCache[classId] = "未知班组";
        }
      })
      .catch(() => {
        classCache[classId] = "请求失败";
      });
  }
  return classCache[classId];
};
//查找指定数据组名字
// 创建一个响应式对象来存储用户信息
const groupCache = reactive({});
const getDataInfo = groupId => {
  if (!groupCache[groupId]) {
    // 初始设为 '加载中...'，以处理异步过程
    groupCache[groupId] = "加载中...";
    http
      .get("/inspection/data/" + groupId)
      .then(res => {
        const data = res.data;
        if (data.code === 0) {
          let dataStr = "";
          data.data.forEach(data => {
            dataStr += data.attribute + "(" + data.perUnit + ");";
          });
          groupCache[groupId] = dataStr;
        } else {
          groupCache[groupId] = "未知数据组";
        }
      })
      .catch(() => {
        groupCache[groupId] = "请求失败";
      });
  }
  return groupCache[groupId];
};
</script>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}
.demo-tabs {
  margin-top: -20px;
}
.topadd {
  position: absolute;
  top: 73px;
  right: 40px;
}
.page-container {
  box-sizing: border-box;
  min-height: 100%;
}
.add {
  position: absolute;
  top: 80%;
  right: 3%;
  float: left;
  width: 60px;
  height: 60px;
  font-size: 50px;
  font-weight: 600;
  border-radius: 50%;
}
.inneradd {
  position: absolute;
  top: 55px;
  right: 30px;
  float: left;
  font-weight: 900;
}
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #060707;
  text-align: center;
}
.Product-image {
  width: auto; /* 图片宽度自适应 */
  max-width: 100%; /* 图片最大宽度为其容器的100% */
  height: auto; /* 图片高度自适应 */
  max-height: 100%; /* 图片最大高度为其容器的100% */
}
.custom-table :deep(.el-table__header-wrapper thead tr th) {
  color: #000000;
  text-align: center;
  background-color: #fafafa;
}
.custom-table :deep(.el-table__body-wrapper tbody tr td) {
  text-align: center; /* 单元格内容居中 */
}
.el-button {
  border-radius: 6px;
}
:deep(.my-label) {
  width: 100px !important;
}
</style>
